<template>
  <div class="person">
    <input type="text" v-model="firstName">
    <br>
    <input type="text" v-model="lastName">
    <br>
    <input type="text" v-model="fullname">
    <br>
    <button @click="changeFullname">修改全名</button>
  </div>
</template>

<script lang="ts" setup name="Person1">
  import {ref} from 'vue';
  import {reactive,toRefs,toRef,computed} from 'vue';
    //数据
    let firstName=ref("沐")
    let lastName=ref("七")
    //计算属性，简写下返回的是只读属性，只能计算不能单独修改
    /*let fullname=computed(()=>{
      return firstName.value+'-'+lastName.value
    })*/

    let fullname =computed({
      get(){
        return firstName.value+'-'+lastName.value
      },
      set(val){
        console.log(val);
        const [str1,str2]=val.split("-")
        firstName.value=str1
        lastName.value=str2
      }
    })

    //方法
    function changeFullname(){
      fullname.value="战-九"
    }


</script>

<style scoped>
.person{
    background-color: #8eace8;
    box-shadow: 0 0 10px;
    border-radius: 10px;
}
</style>